<template>
    <div class="history">
        <div>
            <button class="btn_anniu" @click="change1" :class="{ newStyle: 0 === type }">报警记录</button>
            <button class="btn_anniu" @click="change2" :class="{ newStyle: 1 === type }">历史记录</button>
        </div>
        <div>
            <!-- 历史记录 -->
            <div v-show="1 === type">
                <div class="scroll-container">
                    <table>
                        <thead>
                            <tr class="header-row text-color">
                                <th v-for="item in titleData" :key="item">{{ item }}</th>
                            </tr>
                        </thead>
                        <tbody class="tbody_history ">
                            <tr v-for="item in getHistoryData" :key="item.id"
                                :class="['fixed-height-row', { 'odd-row-history': item.id % 2 === 1, 'header-row-history': item.id % 2 === 0 }]">
                                <td class="line-spacing">{{ item.id }}</td>
                                <td class="line-spacing">{{ item.time }}</td>
                                <td v-for="item in item.context.split(',')" :key="item" class="line-spacing">{{ item
                                    }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 报警记录 -->
            <div v-show="0 === type">
                <table class="call-police-bg">
                        <thead>
                            <tr class="header-row text-color">
                                <th v-for="item in titlePolice" :key="item">{{ item }}</th>
                            </tr>
                        </thead>
                        <tbody class="tbody_history ">
                            <tr v-for="item in list" :key="item.id"
                                :class="['fixed-height-row', { 'odd-row-history': item.id % 2 === 1, 'header-row-history': item.id % 2 === 0 }]">
                                <td class="line-spacing">{{ item.id }}</td>
                                <td class="line-spacing">{{ item.deviceName }}</td>
                                <td  class="line-spacing">{{ item.dataTime}}</td>
                            </tr>
                        </tbody>
                    </table>
                    </div>
            </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import request from '../../api/request';
const type = ref([]);
const list=ref([])
//历史记录
const getHistoryData = ref([]);
const titlePolice=(['序号','内容','时间'])
const titleData = (['球阀1', '球阀2', '球阀3', '球阀4', '球阀5', '球阀6', '球阀7', '球阀8', '球阀9', '球阀10', '球阀11', '球阀12',
    '球阀13', '球阀14', '球阀15', '电磁流量计1', '电磁流量计2', '电磁流量计3', '电磁流量计4', '流量调节阀1', '流量调节阀2', '流量调节阀3',
    '流量调节阀4', '压差变送器1', '压差变送器2', '压差变送器3', '压差变送器4', '温度变送器1', '温度变送器2', '温度变送器3',
    '温度变送器4', '温度变送器5', '磁翻板液位计',
])

request.listOperation({ userId: null }).then(res => {
    list.value=res.data
    console.log(res.data)
});
onMounted(() => {
    type.value = 0;
    requestData_history(3, 1);
   
})
 //获取历史记录接口
function requestData_history(page_history, history_list) {
    request.getListPage({ systemId:page_history,page: history_list, }).then(res => {
        getHistoryData.value = res.data;
    });
}
const change1 = () => {
    type.value = 0;
};
const change2 = () => {
    type.value = 1;
};
</script>
<style lang="scss">
.history {
    /* 引入图片 */
    background-size: 85% 90%;
    /* 设置图片的大小 */
    background-repeat: no-repeat;
    position: fixed;
    left: 5.6%;
    top: 4%;
    /* 固定定位 */
    width: 100%;
    /* 视口宽度 */
    height: 100%;
    background-repeat: no-repeat;

    .btn_anniu {
        position: relative;
        right: 36.7vw;
        width: 10%;
        padding: 10px 0;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        border: 0 solid #fff;
        color: #000;
        outline: none;
        background: #fff;
        /* 添加额外样式以覆盖可能的浏览器默认样式 */
        box-sizing: border-box;
        /* 确保宽度和高度包括边框和内边距 */
        outline: none;
        /* 移除默认的轮廓样式 */
    }

    .newStyle {
        border-bottom: 2px solid #f0892e;
        color: #f0892e;
        font-size: 16px;
        font-weight: bold;
    }

    .scroll-container {
        position: relative;
        overflow-x: auto;
        /* 允许水平滚动 */
        scrollbar-width: 3px;
        /* Firefox 需要的滚动条宽度 */
        scrollbar-color: #ccc transparent;
        /* 滚动条颜色和轨道颜色 */
        white-space: nowrap;
        /* 防止内容换行 */
        height: 82.1vh;
        /* 根据实际需要调整高度 */
        width: 91vw;
        left: 3.1%;
        margin-top: -0.7px;
        /* 根据实际情况调整 */
        border: 0px solid #ccc;
        font-size: 4vh;
        vertical-align: top;
        /* 垂直对齐方式，可根据实际需要调整 */
        /* 设置足够宽的宽度以容纳所有列 */
        /* 设置表格容器内表格的样式 */
        line-height: 3.8vh;
        /* 与容器高度相同 */

        th {
            height: 3.8vh;
            width: 100px;
            padding: 0 10px;
            text-align: center;
            /* 水平居中 */
        }

        td {
            height: 3.8vh;
            width: 100px;
            padding: 0 10px;
            text-align: center;
            color: #000;
            /* 水平居中 */
        }
    }

    .header-row {
        /* 横排序*/
        display: flex;
        background-color: rgb(197, 205, 190);
        height: 3.8vh;
        font-size: 1.5vh;
        text-align: center;
        /* 水平居中 */
    }
    .call-police-bg {
        width: 100vw;
        height: 100vh;
        margin-left: 3.1%;
        background-color: #ffffff;
        /* 设置与容器高度相同的行高 */
        th {
            height: 3.8vh;
            width: 200px;
            padding: 0 10px;
            text-align: center;
            /* 水平居中 */
        }

        td {
            height: 3.8vh;
            width: 200px;
            padding: 0 10px;
            text-align: center;
            color: #ffffff;
            /* 水平居中 */
        }
    }
    .text-color {
        color: rgb(255, 255, 255);
        text-align: center;
        line-height: 3.8vh;
        /* 设置与容器高度相同的行高 */
    }
    .odd-row-history {
        display: flex;
        background-color: rgb(215, 240, 250);
        height: 3.805vh;
        font-size: 1.5vh;
    }

    .header-row-history {
        /* 横排序*/
        display: flex;
        background-color: rgb(246, 237, 221);
        height: 3.805vh;
        font-size: 1.5vh;
        text-align: center;
        /* 水平居中 */
    }

    .but-line-spacing {
        height: 3.9vh;
        width: 14vw;
        margin: auto;
        filter: blur();
    }
    .line-spacing {
        height: 3.8vh;
        width: 15.835vw;
    }
}
</style>